<template>
  <div>
    <div class="background">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="line-height: 16px; font-size: 16px; padding: 12px 0"
      >
        <el-breadcrumb-item :to="{ path: '/Home/Index' }" style=""
          ><img
            style="width: 20px; height: 20px; margin-top: -4px"
            src="../assets/images/homepage_24.png"
        /></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/Home/Index' }"
          >论坛</el-breadcrumb-item
        >
        <el-breadcrumb-item>发帖</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="titleStyle" align="left">发布帖子</div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文章标题">
          <el-input v-model="form.title" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="选择版块">
          <el-select
            :popper-append-to-body="false"
            v-model="form.type"
            placeholder="请选择版块"
          >
            <el-option label="日常" value="0"></el-option>
            <el-option label="知识" value="1"></el-option>
            <el-option label="提问" value="2"></el-option>
            <el-option label="求助" value="3"></el-option>
            <el-option label="交友" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否匿名">
          <el-radio-group v-model="form.realStatus">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文章内容"></el-form-item>
      </el-form>
      <div>
        <vue-ueditor-wrap
          v-model="form.content"
          :config="myConfig"
        ></vue-ueditor-wrap>
      </div>
      <el-button type="primary" @click="submitTopic">发布</el-button>
      <el-button><router-link to="/Home/Index">取消</router-link></el-button>
    </div>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    VueUeditorWrap,
  },
  data() {
    return {
      myConfig: {
        // 设置编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 320,
        // 初始容器宽度
        initialFrameWidth: "972",
        // 可以放后台存放路径
        serverUrl: "",
        // UEditor 是文件的存放路径，
        UEDITOR_HOME_URL: "/static/UEditor/",
      },
      form: {
        uId: JSON.parse(sessionStorage.getItem("user")).uId,
        title: "",
        type: "",
        realStatus: "",
        content: "",
      },
    };
  },
  methods: {
    submitTopic() {
      // console.log(this.form);
      var _this = this;
      let uId = this.form.uId;
      let title = this.form.title;
      let type = this.form.type;
      let realStatus = this.form.realStatus == "男" ? "0" : "1";
      let content = this.form.content;
      $.ajax({
        type: "post",
        data: { uId, title, type, realStatus, content },
        url: "http://localhost:8080/forum/inserttopic",
        dataType: "json",
        success: function (response) {
          if (response === 200) {
            _this.$message({
              message: "发布成功",
              type: "success",
              duration: 1000,
            });
            _this.$router.push("/Home/Index");
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.background {
  width: 1004px;
  padding-left: 20px;
  overflow: auto;
  background-color: #f5f5f5;
  margin: 0 auto;
  min-height: 700px;
  text-align: left;
}
.titleStyle {
  width: 940px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
  padding-left: 20px;
  color: #fff;
  background-color: #a2c1de;
  font-family: 微软雅黑;
  text-align: left;
}

.el-form-item__label {
  font-size: 20px !important;
}
.el-button {
  margin-top: 15px;
}
.el-button a {
  text-decoration: none;
  color: #409eff;
}
</style>